<template>
  <div>
    <!-- 企业信息审核里面  未通过选项  里面的 详情   跳出来的弹出框-->
    <div style="padding:0; padding-top:30px;">
      <div>
        <div class="textareadiv">
          <el-input readonly type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea"></el-input>
        </div>
        <div class="title">封面照</div>
        <div class="infoText licenseimg">
          <img :src="checkPicture" alt="认证凭证" width="100px" height="92px" @click="isShowMyImg">
        </div>
      </div>
    </div>
    <div class="tabShow">
      <div class="nevertab" v-show="tabNum==0">
        <div class="title">审核结果</div>
        <div style="height:40px;display: flex;align-items: center;">
          <el-radio-group v-model="result" style="padding:0 20px" @change="resultChange">
            <!-- 这个change事件的回调 是 选中的 Radio label 值-->
            <!-- 当这个回调参数的值 ===1 的时候 说明是通过的，所以上传的 remark 的值为空，
            如果这个回调参数的值 ===2 的时候，说明被驳回了，所以 会显示出 驳回的input框，然后把remark的值传回后台-->
            <el-radio :label="'1'">通过</el-radio>
            <el-radio :label="'2'">驳回</el-radio>
          </el-radio-group>
          <el-input v-show="result==='2'" placeholder="驳回原因 :" v-model="remark" style="width:400px"></el-input>
        </div>
        <div class="btnBox">
          <el-button @click="cancel">取消</el-button>
          <!-- 提交的时候触发这个 submit 这个事件 -->
          <el-button type="primary" @click="submit2">提交</el-button>
        </div>

      </div>
      <div v-show="tabNum==1||tabNum==2">
        <div
          class="title"
        >对公账户审核信息</div>
        <!-- 当点击的  是优质企业  和  知名企业的时候显示 -->
        <ul
          class="info clearfix"
        >
          <li>
            <div class="infoLabel">审核结果:</div>
            <div
              :class="{'infoText':true,'pass':tabNum==='1','red':tabNum==='2'}"
              v-html="statusList[tabNum]"
            ></div>
          </li>
          <li>
            <div class="infoLabel">审核人:</div>
            <div
              class="infoText"
              v-html="baseInfo.auditorname"
            ></div>
          </li>
          <li>
            <div class="infoLabel">审核时间:</div>
            {{+baseInfo.checkTime | formatDate}}
            <!-- <div
              class="infoText"
              v-html="baseInfo.checkTime"
            ></div> -->
          </li>
          <li v-if="tabNum==2" class="noPassW">
            <div class="infoLabel infoLabel_left">未通过原因:</div>
            <pre class="infoTexty">{{baseInfo.auditdate}}</pre>
          </li>
        </ul>
        <!-- =========================== -->
        <!-- 未通过详情里面的审核信息部分 -->
        <!-- ============================ -->
        <el-table
          :data="checkList2"
          border
          style="width: 80%; margin: 0 auto;"
        >
          <el-table-column
            align='center'
            prop="checkHuman"
            label="审核人"
            width="180"
          >
          </el-table-column>
          <el-table-column
            align='center'
            prop="auditstatus"
            label="审核结果"
            width="180"
          >
            <template slot-scope="scope">
              {{ scope.row.checkState === '1' ? "审核通过" : "审核不通过" }}
            </template>
          </el-table-column>
          <el-table-column
            align='center'
            prop="checkTime"
            label="审核时间"
          >
          </el-table-column>
          <el-table-column
            align='center'
            prop="causeOfFail"
            label="审核说明"
          >
          </el-table-column>
        </el-table>
      </div>
      </div>
      
    </div>
</template>
<script>
export default {
  props:['tabNum'],
  data() {
    return {
      text1: "线下求职服务网点",
      checkPicture:
        "https://tiandufacai-1259220846.cos.ap-shanghai.myqcloud.com/newimg/634771168229851136.jpg",
      remark: "",
      result: "1",
      checkHuman: "",
      textarea:"我的剑，比什么都重要，除了美酒！",
      statusList: {
        "0": "待审核",
        "1": "已通过",
        "2": "未通过"
      },
      baseInfo:{
        auditorname:'哈哈哈',
        checkTime:'12月12日',
        auditdate:"yh哈哈哈哈哈哈儿童儿童儿童儿童儿童儿童儿童二哈哈哈哈哈哈哈哈"
      },
      checkList2: [],
    };
  },
  mounted() {
    this.checkHuman = localStorage
      .getItem("checkHuman")
      .toString()
      .replace(/"/g, "");
  },
  methods: {
    isShowMyImg() {},
    resultChange(r) {
      // 这个change事件的回调 是 选中的 Radio label 值
      // 当这个回调参数的值 ===1 的时候 说明是通过的，所以上传的 remark 的值为空，
      // 如果这个回调参数的值 ===2 的时候，说明被驳回了，所以 会显示出 驳回的input框，然后把remark的值传回后台
      if (r === "1") this.remark = "";
    },
    cancel() {
      this.$emit("cancelCheck", false);
    },
    submit2() {
      if (this.result === "2" && !this.remark.trim()) {
        this.$message({
          message: "驳回原因不能为空",
          type: "warning"
        });
        return;
      }
      this.$confirm("是否确定提交？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let params = {
            companyCode: this.companyId,
            checkState: this.result,
            causeOfFail: this.remark,
            checkHuman: this.checkHuman ? this.checkHuman : "李波"
          };
          // this.$axios
          //   .post("https://fcw.fcw-china.com:8443/electronic/contract/ChangeState", params)
          //   .then(res => {
          //     console.log(res)
          //     if (res.data.message === "更改成功") {
          //       if (this.result === "1") {
          //         // this.checkState = '1';
          //         this.$message({
          //           message: "审核成功!",
          //           type: "success"
          //         });
          //         // var currentDate = {
          //         //   reportid: this.companyId,
          //         //   status: 1,
          //         //   content: '同意'
          //         // }
          //         // this.$emit('reportCallback', currentDate)
          //       } else {
          //         // this.checkState = '2';
          //         this.$message({
          //           message: "申请已驳回!",
          //           type: "warning"
          //         });
          //         // var currentDate = {
          //         //   reportid: this.companyId,
          //         //   status: 2,
          //         //   content: this.remark
          //         // }
          //         // this.$emit('reportCallback', currentDate)
          //       }
          //       this.cancel();
          //     } else {
          //       this.$message({
          //         message: res.data.message,
          //         type: "error"
          //       });
          //       this.cancel();
          //     }
          //   });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>
<style scoped>
.info li {
  float: left;
  /*width: 50%;*/
  padding: 10px 0;
}
.info {
  margin-left: 50px;
}

/* .info li:first-child {
  width: 100%;
} */

.info li:nth-child(2) {
  width: 100%;
}

/* li:nth-child(odd) {
  width: 50%;
}

li:nth-child(even) {
  width: 50%;
} */
li:last-child {
  margin-bottom: 30px;
}

.info li .infoLabel {
  color: #999;
  display: inline-block;
  width: 110px;
  text-align: right;
  margin-right: 10px;
  float: left;
}

.info li .infoText {
  color: #404040;
  display: inline-block;
}

.info li .licenseimg1 {
  display: flex;
  flex-wrap: wrap;
}

.info li .licenseimg1 img {
  width: 86px;
  height: 86px;
  margin: 0 6px 6px 0;
}

.info li .infoLabel_left {
  float: left;
  line-height: 20px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.info li .infoText_right {
  float: right;
  width: 482px;
  line-height: 19px;
}

.info li img {
  vertical-align: top;
}

.status {
  color: #0064e4 !important;
}

.pass {
  color: #19ae0e !important;
}

.red {
  color: #e60012 !important;
}

.btnBox {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

.btnBox button {
  width: 120px;
  margin-right: 50px;
}

.company-introduction-content,
.infoTexty {
  white-space: pre-wrap;
  word-wrap: break-word;
  line-height: 20px;
}

.company-introduction-content {
  width: 80%;
}

.company-introduction-title {
  color: #999;
  width: 110px;
  text-align: right;
  margin-right: 10px;
  line-height: 20px;
}

.company-introduction {
  overflow: hidden;
}

.tabShow {
  margin-top: 30px;
  padding-bottom: 20px;
}

.company-introduction-title1 {
  margin-top: 20px;
  padding: 10px 20px;
  border-top: 1px dashed #d2d2d2;
  font-size: 16px;
}

.company-introduction-title1 > span:first-child {
  float: left;
}

.company-introduction-title1 > span:last-child {
  float: right;
  color: #0064e4;
  cursor: pointer;
  border: 1px solid #0064e4;
  padding: 4px 6px;
}

.info1 li {
  float: left;
  width: 50%;
  padding: 10px 0;
}

.info1 li .infoLabel {
  color: #999;
  display: inline-block;
  width: 110px;
  text-align: right;
  margin-right: 10px;
  float: left;
}

.info1 li .infoText {
  color: #404040;
  display: inline-block;
}
.infoText img {
  margin-left: 50px;
  margin-bottom: 10px;
}
.textareadiv{
  margin: 0 30px;
}
.noPassW{
  float:right; 
  margin-left: 230px;
}
</style>